<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"   
      xmlns:jb="http://java.sun.com/jsf/composite/componentes"
      xmlns:p="http://primefaces.org/ui">

    <h:form onsubmit="return checkSubmit();"  id="frmPago">
        <p:panel id="pnlDatosCliente" header="#{i18n['cobranza.pago']}" style="#{applicationMBean.estiloTitulo}">
            <h:outputLabel value="#{i18n['cobranza.informacion.cliente']}" styleClass="subTitulo"/>
            <p:separator />
            <h:panelGrid columns="2" cellpadding="5">
                <h:panelGrid columns="2" cellpadding="5">
                    <h:outputLabel value="#{i18n['cobranza.tipo.nro.documento']}" styleClass="label"/>
                    <h:outputText value="#{cobranzaMBean.dtoPopup.clienteDto.tipoNumeroDocumento}" styleClass="general"/>

                    <h:outputLabel value="#{i18n['cobranza.nombres']}" styleClass="label"/>
                    <h:outputText value="#{cobranzaMBean.dtoPopup.clienteDto.nombres}" styleClass="general"/>

                    <h:outputLabel value="#{i18n['cobranza.apellido.paterno']}" styleClass="label"/>
                    <h:outputText value="#{cobranzaMBean.dtoPopup.clienteDto.apellidoPaterno}" styleClass="general"/>

                    <h:outputLabel value="#{i18n['cobranza.apellido.materno']}" styleClass="label"/>
                    <h:outputText value="#{cobranzaMBean.dtoPopup.clienteDto.apellidoMaterno}" styleClass="general"/>

                    <h:outputLabel value="#{i18n['cobranza.fecha.nacimiento']}" styleClass="label"/>
                    <h:outputText value="#{cobranzaMBean.dtoPopup.clienteDto.fechaNacimiento}" styleClass="general">
                        <f:convertDateTime pattern="#{applicationMBean.formatoFecha}"  timeZone="#{applicationMBean.timeZone}"/>
                    </h:outputText>

                    <h:outputLabel value="#{i18n['cobranza.edad']}" styleClass="label"/>
                    <h:outputText value="#{cobranzaMBean.dtoPopup.clienteDto.edad}" styleClass="general"/>
                    
                    <h:outputLabel value="#{i18n['cobranza.sexo']}" styleClass="label"/>
                    <h:outputText value="#{cobranzaMBean.dtoPopup.clienteDto.sexoTexto}" styleClass="general"/>
                </h:panelGrid>
                <h:panelGrid>
                    <h:outputLabel value="#{i18n['cobranza.direccion.domiciliar']}" styleClass="subTitulo"/>
                    <p:separator />
                    <h:panelGrid columns="2" cellpadding="5">
                        <h:outputLabel value="#{i18n['cobranza.direccion']}" styleClass="label"/>
                        <h:outputText value="#{cobranzaMBean.dtoPopup.clienteDto.direccionDomiciliar}" styleClass="general"/>

                        <h:outputLabel value="#{i18n['cobranza.referencia']}" styleClass="label"/>
                        <h:outputText value="#{cobranzaMBean.dtoPopup.clienteDto.referenciaDomiciliar}" styleClass="general"/>

                        <h:outputLabel value="#{i18n['cliente.ubigeo']}" styleClass="label"/>
                        <h:outputText value="#{cobranzaMBean.dtoPopup.clienteDto.ubigeoDto.descripcion}" styleClass="general"/>
                    </h:panelGrid>

                    <h:outputLabel value="#{i18n['cobranza.direccion.laboral']}" styleClass="subTitulo"/>
                    <p:separator />
                    <h:panelGrid columns="2" cellpadding="5">
                        <h:outputLabel value="#{i18n['cobranza.direccion']}" styleClass="label"/>
                        <h:outputText value="#{cobranzaMBean.dtoPopup.clienteDto.direccionLaboral}" styleClass="general"/>

                        <h:outputLabel value="#{i18n['cobranza.referencia']}" styleClass="label"/>
                        <h:outputText value="#{cobranzaMBean.dtoPopup.clienteDto.referenciaLaboral}" styleClass="general"/>
                        
                        <h:outputLabel value="#{i18n['cliente.empresa.ubigeo']}" styleClass="label"/>
                        <h:outputText value="#{cobranzaMBean.dtoPopup.clienteDto.empUbigeoDto.descripcion}" styleClass="general"/>
                    </h:panelGrid>
                </h:panelGrid>
            </h:panelGrid>

            <h:outputLabel value="#{i18n['cobranza.deuda.cliente']}" styleClass="subTitulo"/>
            <p:separator />
            <h:panelGrid columns="4" cellpadding="5">
                         <h:outputLabel value="#{i18n['cobranza.cuotas']}" styleClass="label"/>
                <h:outputText value="#{cobranzaMBean.dtoPopup.totalCuotas}" styleClass="general"/>

                <h:outputLabel value="#{i18n['cobranza.fecha.vencimiento']}" styleClass="label"/>
                <h:outputText value="#{cobranzaMBean.dtoPopup.fechaVencimiento}" styleClass="general">
                    <f:convertDateTime pattern="#{applicationMBean.formatoFecha}"  timeZone="#{applicationMBean.timeZone}"/>
                </h:outputText>

                <h:outputLabel value="#{i18n['cobranza.cuotas.vencidas']}" styleClass="label"/>
                <h:outputText value="#{cobranzaMBean.dtoPopup.cuotasVencidas}" styleClass="general"/>

                <h:outputLabel value="#{i18n['cobranza.moneda']}" styleClass="label"/>
                <h:outputText value="#{cobranzaMBean.dtoPopup.moneda}" styleClass="general"/>

                <h:outputLabel value="#{i18n['general.label.estado']}" styleClass="label"/>
                <h:outputText value="#{cobranzaMBean.dtoPopup.estadoDeudaDto.descripcion}" styleClass="general"/>

                <h:outputLabel value="#{i18n['cobranza.monto']}" styleClass="label"/>
                <h:outputText value="#{cobranzaMBean.dtoPopup.montoTotal}" styleClass="general">
                    <f:convertNumber pattern="#{applicationMBean.formatoMontos}" />
                </h:outputText>
            </h:panelGrid>
        </p:panel>

        <p:panel id="pnlPagos" header="#{i18n['cobranza.pagos.realizados']}" style="#{applicationMBean.estiloTitulo}" rendered="#{cobranzaMBean.dtoPopup.listaPagos != null &amp;&amp; cobranzaMBean.dtoPopup.listaPagos.size()>0}">
            <h:panelGrid>
                <p:dataTable id="tblPago" value="#{cobranzaMBean.dtoPopup.listaPagos}" var="dtoPago" 
                             rowKey="#{dtoPago.id}" emptyMessage="#{i18n['cobranza.no.pagos']}" styleClass="estiloPanel">
                    <p:column headerText="#{i18n['cobranza.numero.operacion']}" styleClass="general">
                        <h:outputText value="#{dtoPago.numeroOperacion}" styleClass="general"/>
                    </p:column>
                    <p:column headerText="#{i18n['cobranza.codigo.producto']}" styleClass="general">
                    <h:outputText value="#{dtoPago.codigoProducto}" styleClass="general"/>
                </p:column>
                    <p:column headerText="#{i18n['cobranza.fecha.pago']}" styleClass="general">
                        <h:outputText value="#{dtoPago.fecha}" styleClass="general">
                            <f:convertDateTime pattern="#{applicationMBean.formatoFecha}"  timeZone="#{applicationMBean.timeZone}"/>
                        </h:outputText>
                    </p:column>

                    <p:column headerText="#{i18n['cobranza.monto']}" styleClass="general">
                        <h:outputText value="#{dtoPago.monto}" styleClass="general">
                            <f:convertNumber pattern="#{applicationMBean.formatoMontos}" />
                        </h:outputText>
                    </p:column>

                    <p:column headerText="#{i18n['cobranza.moneda']}" styleClass="general">
                        <h:outputText value="#{dtoPago.moneda}" styleClass="general"/>
                    </p:column>

                    <p:column headerText="#{i18n['cobranza.comentarios']}" styleClass="general">
                        <h:outputText value="#{dtoPago.comentarios}" styleClass="general"/>
                    </p:column>
                </p:dataTable>
            </h:panelGrid>
        </p:panel>
    </h:form>
</html>